<template>
	<div class="mainContent">
		<pathTracking :path="Model.path" />
		<div class="container">
			<div>
				<el-row class="detailTable">
					<div class="detailTableItemTitle">
						<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
						<p class="text">采购退货单</p>
					</div>
					<!-- 高级搜索 -->
					<advancedSearch :option="Model.filterOption" @getChild="showChild" @onSearch="toSearch" @onClear="toClear" @onExport="toExport"></advancedSearch>
					<div class="OutofstockSearch">
						<el-row class="rows basic">
							<el-col :sm="12" :md="8" :lg="6">
								<el-input class="input-cont" v-model="Model.writeSku" placeholder="请扫码入库/输入SKU" @keyup.enter.native="checkSku"></el-input>
							</el-col>
							<el-col :sm="12" :md="8" :lg="6">
								<div class="items">
									<div class="btn" @click="checkSku()">确认</div>
								</div>
							</el-col>
						</el-row>
					</div>
				</el-row>
				<!--出库操作时 -->
				<el-row class="detailTable">
					<div class="detailTableItemTitle">
						<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
						<p class="text">添加退货商品</p>
					</div>
					<el-row class="addbtn">
						<div class="cont" @click="deleteTableData">
							<p class="font">删除</p>
						</div>
					</el-row>
					<div class="detailTableDetail">
						<el-table :data="Model.tableDataOut" border style="width: 100%;max-height:550px" @selection-change="handleSelectionChange">
							<el-table-column type="selection" width="50" fixed></el-table-column>
							<el-table-column
								align="center" 
								label='商品图片'
								>
								<template slot-scope="scope">
									<div class="scopecont">
										<el-tooltip placement="top" effect="light">
										  <div slot="content"><img class="maxTableImg" :src="scope.row.photoUrl" alt=""></div>
										  <img class="mainTableImg" :src="scope.row.photoUrl" alt="">
										</el-tooltip>
									</div>
								</template>
							</el-table-column>
							<el-table-column 
								v-for="(item,index) in Model.tableHeaderData"
								:key="item.prop"
								:prop="item.prop" 
								:label="item.label" 
								:width="item.width" 
							></el-table-column>
							<el-table-column
								label='数量'
								width='120'
								>
								<template slot-scope="scope">
									<div class="scopecont" v-if="scope.row.batchNo">
										{{scope.row.mainQuantity}}
									</div>
									<div class="scopecont" v-else>
										<el-input-number v-model="scope.row.mainQuantity" :min="1" :max="10" label="数量"></el-input-number>
									</div>
								</template>
							</el-table-column>	
							<el-table-column
								fixed="right"
								label='退货原因'
								width='120'
								>
								<template slot-scope="scope">
									<el-select v-model="scope.row.remark" placeholder="请选择">
										<el-option
											v-for="(item,index) in Model.remarkReason"
											:key="item.value"
											:label="item.label"
											:value="item.value"></el-option>
									</el-select>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</el-row>	
				<el-row class="bottom">
					<div class="btn_group">
						<div class="btn_item" @click="OutofstockHandle('保存')">保存</div>
						<div class="btn_item" @click="OutofstockHandle('确认出库')">确认出库</div>
						<div class="btn_item cancel">取消</div>
					</div>
				</el-row>
			</div>
		</div>
	</div>
</template>

<script>
	import pathTracking from "@/components/common/pathTracking";
	import pagination from "@/components/common/pagination.vue";
	import advancedSearch from "@/components/common/filter/advancedSearch";
	import {
		getDateString
	} from "@/assets/js/common.js";
	import Model from "./model.js";
	import Controller from "./Controller.js";
	export default {
		name: "purchase",
		mixins: [Model, Controller],
		components: {
			advancedSearch,
			pagination,
			pathTracking
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	@import "./index.less";
</style>
